<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="../images/yc.png" type="image/x-icon">
<link rel="stylesheet" href="../css/layui.css"  media="all">
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
		<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
		<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
	</div>
</script>

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
<script src="../js/layui.all.js" charset="utf-8"></script>
 
<script>
layui.use('table', function(){
	var table = layui.table;
  
	table.render({
    	elem: '#test',
		url:'../data/demo1.json?page=1&limit=10',
		toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
		defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      	title: '提示',
      	layEvent: 'LAYTABLE_TIPS',
      	icon: 'layui-icon-tips'
    }],
    title: '用户数据表',
    cols: [[
      {
		type: 'checkbox', fixed: 'left'},
      	{field:'id', title:'编号', width:80, fixed: 'left', unresize: true, sort: true, align: 'center'},
		{field:'username', title:'用户名', width:120, align: 'center', edit: 'text'},
		{field:'email', title:'邮箱', width:150, align: 'center', edit: 'text', templet: function(res){
        	return '<em>'+ res.email +'</em>'
      	}},
		{field:'sex', title:'性别', width:80, edit: 'text', align: 'center', sort: true},
		{field:'city', title:'城市', width:100, align: 'center'},
		{field:'sign', title:'签名', align: 'center'},
		{field:'experience', title:'积分', width:80, align: 'center', sort: true},
		{field:'ip', title:'IP', width:120, align: 'center'},
		{field:'logins', title:'登入次数', width:120, align: 'center', sort: true},
		{field:'joinTime', title:'加入时间', width:120, align: 'center'},
		{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150, align: 'center'}
    ]],
	page: { 
		layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'], //自定义分页布局
      //,curr: 5 // 设定初始在第 5 页
      groups: 10, // 只显示 1 个连续页码
      first: '首页', //不显示首页
      last: '尾页' //不显示尾页
      
    }
	});
  
	// 头工具栏事件
	table.on('toolbar', function(obj){
		var checkStatus = table.checkStatus(obj.config.id);
    	switch(obj.event){
      	case 'getCheckData':
        	var data = checkStatus.data;
        	layer.alert(JSON.stringify(data));
     		break;
      	case 'getCheckLength':
        	var data = checkStatus.data;
        	layer.msg('选中了：'+ data.length + ' 个');
      		break;
     	case 'isAll':
        	layer.msg(checkStatus.isAll ? '全选' : '未全选');
      		break;
      
      	// 自定义头工具栏右侧图标 - 提示
      	case 'LAYTABLE_TIPS':
        	layer.alert('这是工具栏右侧自定义的一个图标按钮');
      		break;
		};
	});
  
	// 监听行工具事件
	table.on('tool', function(obj){
    	var data = obj.data;
    	// console.log(obj)
    	if(obj.event === 'del'){
      		layer.confirm('数据一旦删除将不能恢复，您确定要删除吗？', function(index){
        		obj.del();
        		layer.close(index);
			});
    	} else if(obj.event === 'edit'){
      		layer.prompt({
        		formType: 3,
        		value: data.email
      		}, function(value, index){
				obj.update({
					email: value
        		});
        		layer.close(index);
      		});
		}
	});
});
</script>
</body>
</html>